<template>
  <div id="app">
    <keep-alive v-if="$route.meta.keepAlive">
      <router-view></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    async init () {
      const res = await this.$http.get('/info')
      const { code } = res;
      if (code === 200) {
        this.$store.dispatch('setInfo', res.data)
      }
    }
  },
  created () {
    this.init()
  }
}
</script>

<style lang="scss">
  @import "./assets/scss/var.scss";
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  .flex {
    display: flex;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-column {
    flex-direction: column;
  }
  .justify-content-center {
    justify-content: center;
  }
  .justify-content-space-around {
    justify-content: space-around;
  }
  .justify-content-space-between {
    justify-content: space-between;
  }
  .align-items-center {
    align-items: center;
  }
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .el-menu-item [class^=iconfont],
  .el-submenu [class^=iconfont] {
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
    vertical-align: middle;
  }
  .el-submenu .el-menu-item {
    min-width: 150px;
  }
  .content {
    background-color: $white;
    box-sizing: border-box;
    padding: 20px;
  }
  .block-content {
    margin-bottom: 20px;
    background-color: $white;
    box-sizing: border-box;
    padding: 20px;
  }
</style>
